<template>
    <div class="knowledge2">
        <div class="search">
            <input type="text" />
            <img :src="searchUrl">
        </div>
        <div class="knowledge2-body">
            <div class="knowledge2-body-item" v-for="(item, index) in list" :key="index">
                <img :src="item.imgUrl ? item.imgUrl : bannerUrl" >
                <div>
                    <span>{{item.title}}</span>
                    <div>{{item.content}}</div>
                </div>
            </div>
        </div>
        <div class="knowledge2-footer">
            <div>
                <img :src="EMKnowledge_1">
                <span class="active">胸痛知识</span>
            </div>
            <div @click="linktoEMFun">
                <img :src="EMFun_2">
                <span>一键呼救</span>
            </div>
            <div @click="linktoEMMine">
                <img :src="EMMine_2">
                <span>我的</span>
            </div>
        </div>
    </div>
</template>
<script>
const searchUrl = require('@/assets/img/search2hdpi.png')
const bannerUrl = require('@/assets/img/banner@3x.png')
const EMKnowledge_1 = require('@/assets/img/1-1hdpi.png')
const EMMine_2 = require('@/assets/img/3-2hdpi.png')
const EMFun_2 = require('@/assets/img/2-2hdpi.png')
const oneUrl = require('@/assets/img/www/120.jpg')
const twoUrl = require('@/assets/img/www/two.jpg')
const threeUrl = require('@/assets/img/www/3.png')
const fourUrl = require('@/assets/img/www/4.png')
const fiveUrl = require('@/assets/img/www/5.png')
const sixUrl = require('@/assets/img/www/6.jpg')
const sevenUrl = require('@/assets/img/www/7.jpg')
const Base64 = require('js-base64').Base64
import { Toast } from 'mint-ui'
export default {
    data () {
        return {
            EMKnowledge_1: EMKnowledge_1,
            EMFun_2: EMFun_2,
            EMMine_2: EMMine_2,
            searchUrl: searchUrl,
            bannerUrl: bannerUrl,
            list: [
                {   
                    imgUrl: oneUrl,
                    title: '怎样呼叫120',
                    content: '人的一生中难免需要拨打急救电话120。因此，你应事先知道拨打120...'
                },
                {
                    imgUrl: twoUrl,
                    title: '中暑及急救方法',
                    content: '近日来，酷热的天气已经来临，因中暑而去医院就诊的人数不断增。为...'
                },
                {
                    imgUrl: threeUrl,
                    title: '心跳呼吸骤停 成人心肺复苏流程（2015指南）',
                    content: '判断意识→呼救→（启动EMSS）→判断呼吸→胸外按压30次→打开气...'
                },
                {
                    imgUrl: fourUrl,
                    title: '成人心肺复苏操作要点 心脏按压(Compression)',
                    content: '心脏按压(Compression)深度5-6厘米频率100-120次/分钟位置准确：胸...'
                },
                {
                    imgUrl: fiveUrl,
                    title: '开放气道(airway)',
                    content: '仰头举颏法开放气道（常用仰头举颏法）畅通气道原理：抬起舌根解除...'
                },
                {
                    imgUrl: sixUrl,
                    title: '心律失常急救要点',
                    content: '①安静卧床休息，切忌活动。②吸氧气。③呼叫"120"急救服务，争取在...'
                },
                {
                    imgUrl: sevenUrl,
                    title: '急性腹痛急救要点',
                    content: '①首先根据腹痛的位置、性质、其他症状，考虑最可能的病因，争取最...'
                }
            ]
        }
    },
    created () {
        let token = this.LocalStorageUtil.getItem('token')
        if (!token) {
            let value = ''
            let timestamp = new Date().getTime()
            let charactors="ab1cd2ef3gh4ij5kl6mn7opq8rst9uvw0xyz";
            let i;
            for(let j=1;j<=5;j++){
                i = parseInt(35*Math.random()); 　
                value = value + charactors.charAt(i);
            }
            let joint = value + '68822889yu' + timestamp
            let encrypt = Base64.encode(joint)
            let inversion = encrypt.split("").reverse().join("")
            this.ACApi.getTokenApi(inversion, {
                onSuccess: res => {
                    console.log(res)
                    Toast({
                        message: '登录成功',
                        iconClass: 'mintui mintui-success',
                        duration: 1500
                    })
                    this.LocalStorageUtil.setItem('token', res.result.token)
                },
                onFail: error => console.log(error)
            })
        }
    },
    methods: {
        linktoEMFun () {
            this.$router.push({ path: '/wxemfun' })
        },
        linktoEMMine () {
            this.$router.push({ path: '/wxemmine' })
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '../../assets/css/layout'
@import '../../assets/css/var'
.search {
    box-sizing: border-box
    position: fixed
    top: 0
    z-index: 100
    background: $White   
    $row()
    height: 1.1rem
    padding .2rem .4rem
    input {
        box-sizing: border-box
        width: 6.7rem
        height: .7rem
        background: $e6
        border-radius: .08rem
        padding: 0 .2rem
        color: $lBlack
    }
    img {
        position: absolute
        right: .4rem
        width: .7rem
        height: .7rem
    }
}
.knowledge2-body {
    padding: 1.1rem 0 1.2rem 0
    .knowledge2-body-item {
        box-sizing: border-box
        height: 2rem
        $row()
        padding .2rem .4rem
        background: $White
        border-bottom: 1px solid $dWhite
        img {
            width: 2rem
            height: 1.6rem
            border-radius: .08rem
            margin-right: .4rem
        }
        div {
            $flex-1()
            $column()
            padding: .1rem 0
            span {
                $flex-1()
                display: inline-block
                width: 4rem
                font-size: $text-font28
                color: $lBlack
                line-height: .35rem
            }
            div {
                flex: 1.3
                width: 4rem
                font-size: $text-font24
                color: $elBlack
                line-height: .35rem
                overflow: hidden
                text-overflow: ellipsis
            }
        }
    }
}
.knowledge2-footer {
    width: 100%
    height: 1.2rem
    background: $White
    position: fixed
    bottom: 0
    border-top: 1px solid $dWhite
    z-index: 1000
    $row()
    div {
        flex: 1
        $column()
        $flex-vc()
        $flex-ac()
        img {
            width .8rem
            height: .8rem
        }
        span {
            font-size: $text-font21
            color: $elBlack
            &.active {
                color: $green
            }
        }
    }
}
</style>
